<script setup lang="ts">
import { get, loadFile, message, post } from '@/utils'
import { Button, Image, Popconfirm, Tag } from '@arco-design/web-vue'
import useModal from '@/hooks/useModal'
import avatar from '@/assets/avatar.png'
import useTable from '@/hooks/useTable'
import Modal from './components/Modal.vue'
import SelectCoupon from '@/components/SelectModal/Coupon.vue'
import ViewUserOrderList from './components/ViewUserOrderList.vue'
import { BtnPermission } from '@/enum/permission'
const selectedKeys = ref([])
const { store: viewStore } = useModal()
const { store: couponStore } = useModal()
const { store: moneyStore } = useModal()
const { store: orderStore } = useModal()
const { store } = useModal()
const { formatColumns } = useTable()
const searchQuery = reactive({})
const formRef = ref()
const actionRef = ref()

const pagination = {
  showPageSize: true,
  pageSize: 20,
  pageSizeOptions: [10, 20, 50, 100, 500, 1000],
}
const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    get(
      {
        url: '/server-user/sys-seller/user/page',
        data: { size: params.pageSize, ...params },
      },
      ({ data, code }) => {
        resolve({
          data: data.records,
          total: data.total,
          success: code == 200,
        })
      }
    )
  })
}
const batchGiftCoupon = () => {
  if (selectedKeys.value.length) {
    couponStore.handleShow({})
  } else {
    message({
      type: 'warning',
      content: '请选择用户后操作!',
    })
  }
}

const onGift = couponIds => {
  post({ url: '/server-shop/sys-seller/coupon/send', data: { ids: couponIds.join(','), userIds: selectedKeys.value.join(',') } }, ({ code, msg }) => {
    if (code == 200) {
      selectedKeys.value = []
      actionRef.value.clearSelected()
    }
    message({
      type: code == 200 ? 'success' : 'error',
      content: msg,
    })
  })
}
const columns = formatColumns([
  { title: '用户Id', dataIndex: 'id', width: 200 },
  {
    title: '用户头像',
    dataIndex: 'avatar',
    width: 100,
  },
  { title: '用户昵称', dataIndex: 'nickName', hideInSearch: false, width: 200 },

  { title: '用户生日', dataIndex: 'birthday', width: 200 },
  { title: '手机号码', dataIndex: 'mobile', hideInSearch: false, width: 200 },
  { title: '经验值', dataIndex: 'exp', width: 200 },
  { title: '备注', dataIndex: 'remark', width: 200, ellipsis: true },
  { title: '创建时间', dataIndex: 'createTime', width: 200 },

  {
    title: '操作',
    dataIndex: 'operations',
    width: 100,
    fixed: 'right',
    btnList: [
      {
        permission: BtnPermission.查看,
        name: '历史订单',
        handle: ({ record }) => orderStore.handleShow(record),
      },
    ],
  },
])
</script>

<template>
  <div class="page">
    <ProTable
      :columns="columns"
      :request="request"
      row-key="id"
      :scroll="{ x: 1000 }"
      :form-ref="ref => (formRef = ref)"
      :pagination="pagination"
      header-title=" "
      column-resizable
      :params="searchQuery"
      :bordered="{ cell: true }"
      :action-ref="ref => (actionRef = ref)"
      v-model:selectedKeys="selectedKeys"
      :row-selection="{
        type: 'checkbox',
        showCheckedAll: true,
        onlyCurrent: false,
      }"
    >
      <template #option-render="{ dom, reset }">
        <component :is="dom[1]" />
        <component :is="dom[0]" />
      </template>
      <template #tool-bar>
        <a-button type="primary" class="mb10" @click="batchGiftCoupon" v-permission="[BtnPermission.编辑]">
          <template #icon>
            <icon-gift />
          </template>
          送优惠券</a-button
        >
      </template>
      <template #avatar="{ record }">
        <a-image :src="record.avatar || avatar" width="30"></a-image>
      </template>
    </ProTable>
    <ViewModal v-if="viewStore.show" v-model:show="viewStore.show" :id="viewStore.id" :amountType="viewStore.info.amountType" />
    <MoneyModal v-if="moneyStore.show" v-model:show="moneyStore.show" :id="moneyStore.id" @confirm="actionRef.reload" />
    <Modal v-if="store.show" v-model:show="store.show" :id="store.id" @confirm="actionRef.reload" />
    <SelectCoupon v-if="couponStore.show" v-model:show="couponStore.show" type="checkbox" @confirm="onGift" />
    <ViewUserOrderList v-if="orderStore.show" v-model:show="orderStore.show" :id="orderStore.id" />
  </div>
</template>
